import { SafeAreaView, StyleSheet, Text, View, TouchableOpacity, Image, ScrollView, TouchableHighlight, TextInput, Button, KeyboardAvoidingView, Modal, ViewPagerAndroid, FlatList, ActivityIndicator, Keyboard, Dimensions } from 'react-native';
import React, { Component } from 'react'
import NavBar from '../../components/PublicHeader';
import { POST_USER_SOCIALCIRCLE_DETAILS, POST_USER_SOCIALCIRCLE_PRAISE, POST_USER_SOCIALCIRCLE_ADDCOMMENT, POST_USER_SOCIALCIRCLE_DELETE, POST_USER_SOCIALCIRCLE_COMMENT, POST_DELETE_COMMENT } from '../../public/WebApi/socialcircleApi'
import fetchWebApi from '../../public/WebApi/fetchBase';
import getStorageValue from '../../utils/getStorageValue';
import { Constant } from '../../public/js/constant';
import { Container } from 'native-base';
import Layer from "../../utils/Layer";
// import {} from "../socialcircle/socialcircle";
import handleChange from '../../utils/GetLocation'
import ImageViewer from 'react-native-image-zoom-viewer';
const { width: ScreenWidth, height: ScreenHeight } = Dimensions.get('window');
export default class socialcircle extends Component {
    constructor(props) {
        super(props)
        this.commentInput = React.createRef();
        this._flatList;
        this.state = {
            businessId: this.props.navigation.state.params.businessId,
            userInfoId: this.props.navigation.state.params.userInfoId,
            socialcircleInfo: [],
            topTitle: "社圈详情",
            headerRightImage: require("../../assets/images/socialcircle/more_right.png"),

            appList: [
                {
                    headPortrait: require("../../assets/images/socialcircle/wechat.png"),
                    describe: "微信"
                },
                {
                    headPortrait: require("../../assets/images/socialcircle/friendCircle.png"),
                    describe: "朋友圈"
                },
                {
                    headPortrait: require("../../assets/images/socialcircle/QQ.png"),
                    describe: "QQ"
                },
                {
                    headPortrait: require("../../assets/images/socialcircle/QQZone.png"),
                    describe: "QQ空间"
                },
            ],
            otherList: [
                // {
                //     headPortrait: require("../../assets/images/socialcircle/copy.png"),
                //     describe: "复制链接"
                // },
                // {
                //     headPortrait: require("../../assets/images/socialcircle/complain.png"),
                //     describe: "举报"
                // },
                // {
                //     headPortrait: require("../../assets/images/socialcircle/editorialCircle.png"),
                //     describe: "编辑"
                // },
                {
                    headPortrait: require("../../assets/images/socialcircle/deleteBtn.png"),
                    describe: "删除",
                    url: ''
                },
                // {
                //     headPortrait: require("../../assets/images/socialcircle/socialCirclePromotion.png"),
                //     describe: "社圈推广",
                //     url: 'socialCirclePromotion',
                // },
            ],

            // },
            isModal: false,
            commentContent: '',
            praise: {},
            describe: '',
            isImageShow: false,
            imageIndex: 0,
            remarks: [],
            i: 0,
            isMy: false,
            page: 0,
            pageSize: 100,
            businessCommentList: [],
            tempAddDatas: [],
            status: 1,
            commentPlaceholder: '写评论',
            viewUserInfoId: '',
            id: '',
            tier: 0,
            comDelModal: false,
            currentComment: '',
            count: 1
            // mySocialCircle: [this.props.navigation.state.params.mySocialCircle]
        }
    }

    // 获取时分秒
    getLocalTime(date) {
        var date = new Date(date);//如果date为13位不需要乘1000

        var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';

        var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';

        var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());

        return h + m + s;//Y + M + D +
    }
    // 获取月日
    getLocalTime2(date) {
        var date = new Date(date);//如果date为13位不需要乘1000

        var Y = date.getFullYear() + '年';

        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '月';

        var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + '日';
        return M + D
    }

    getCommentContent(text) {
        this.setState({
            commentContent: text
        })
        console.log(this.state.commentContent);
    }

    clearInput() {
        this.setState({
            commentContent: ''
        })
    }

    componentDidMount = () => {
        console.log(this.state.businessId);
        // console.log("###########" + this._rightImageFn());
        this.getSocialCircleList();
        this.getCommentList()
        // this._rightImageFn()
    }
    componentDidUpdate = () => {
        // console.log(this.state.socialcircleInfo[0].remark);

    }

    clearMsg() {

        this.commentContent.state.value = ''
    }

    // _rightImageFn() {
    //     this.state.socialcircleInfo.map((item, index) => {
    //         if (item.myId == item.userInfoId) {
    //             this.setState({
    //                 isMy: true
    //             })
    //         }
    //     })
    // }

    _renderImage(item, index) {
        // let url = item.filePath;
        // let source = { uri: url };
        this.state.remarks[this.state.i++] = item.remark
        // console.log(item);
        // console.log(this.state.remarks)


        return (
            <TouchableOpacity style={(index + 1) % 3 == 0 ? styles.item : styles.itemMr} onPress={this._openMax.bind(this, index)} key={'image' + index}>
                <Image source={{ uri: item.url }}
                    style={styles.SystemPrompt} />
            </TouchableOpacity>
        );
    }

    _openMax(index) {
        this.setState({
            isImageShow: true,
            imageIndex: index,
        });
    }

    async getSocialCircleList() {

        const res = await fetchWebApi(POST_USER_SOCIALCIRCLE_DETAILS, { token: await getStorageValue(Constant.TOKEN), businessId: this.state.businessId, }, 'POST');
        console.log("########## getSocialCircleList");
        console.log(res);
        if (res.status == 200) {
            this.setState({
                socialcircleInfo: res.data,
                describe: res.data[0].remark
            })
            console.log(this.state.socialcircleInfo);
            if (res.data[0].myId == res.data[0].userInfoId) {
                this.setState({
                    isMy: true
                })
            }
        } else {
            Layer.showMsg("获取用户信息列表失败");
        }
    }

    async postSocialCirclePraise(item) {
        console.log(5555555555555555)
        console.log(this.state.businessId)
        let id = this.state.businessId
        const res = await fetchWebApi(POST_USER_SOCIALCIRCLE_PRAISE, { token: await getStorageValue(Constant.TOKEN), userInfoId: this.state.userInfoId, businessId: item.businessId, viewUserInfoId: item.userInfoId, commentsId: item.id, count: this.state.count }, 'POST');
        console.log("########## postSocialCircleListPraise");
        console.log(res);
        console.log("########## postSocialCircleListPraise");

        if (res.status == 200) {
            this.setState({
                // praise: res.data,
                businessCommentList: [],
                page: 0
                // change: this.state.socialcircleInfo.countGive = this.state.praise.data.count
            })
            this.getSocialCircleList()
            // if
            this.getCommentList()
        } else {
            Layer.showMsg("点赞失败");
        }
    }

    async postAddComment() {
        const res = await fetchWebApi(POST_USER_SOCIALCIRCLE_ADDCOMMENT,
            { token: await getStorageValue(Constant.TOKEN), businessId: this.state.businessId, content: this.state.commentContent, userInfoId: this.state.userInfoId, viewUserInfoId: this.state.viewUserInfoId, id: this.state.id, tier: this.state.tier },
            'POST');
        console.log("########## postAddComment");
        // console.log(res);
        // console.log(this.state.socialcircleInfo.businessId);
        // console.log(this.state.socialcircleInfo.userInfoId);
        if (res.status == 200) {
            this.setState({
                // socialcircleInfo: res.data,
                commentContent: '',
                page: 0,
                pageSize: 1000,


            })
            this.getSocialCircleList(),
                this.getCommentList(),
                Keyboard.dismiss()
            // this._flatList.scrollToEnd(),
            // Layer.showMsg("评论成功");
        } else {
            Layer.showMsg("发布评论失败");
        }
    }

    async deleteSocialcircle() {
        const res = await fetchWebApi(POST_USER_SOCIALCIRCLE_DELETE, { token: await getStorageValue(Constant.TOKEN), businessId: this.state.businessId }, 'POST');
        if (res.status == 200) {
            Layer.showMsg("社圈删除成功");
        } else {
            Layer.showMsg("社圈删除失败");
        }
    }

    async getCommentList() {
        const res = await fetchWebApi(POST_USER_SOCIALCIRCLE_COMMENT, { token: await getStorageValue(Constant.TOKEN), page: this.state.page, pageSize: this.state.pageSize, businessId: this.state.businessId }, 'POST');
        console.log("########## getCommentList");
        console.log(res);
        if (res.status == 200) {
            if (this.state.page == 0) {
                this.setState({
                    businessCommentList: res.data
                })
            } else {
                this.setState({
                    tempAddDatas: res.data
                })
            } if (this.state.tempAddDatas.length == 0) {
                this.setState({
                    status: 0
                })
            }
        } else {
            Layer.showMsg("获取评论失败");
        }
        console.log("@@@@@@@@@@");
        console.log(this.state.tempAddDatas);

    }

    async deleteComment() {
        const res = await fetchWebApi(POST_DELETE_COMMENT, { token: await getStorageValue(Constant.TOKEN), businessId: this.state.businessId, id: this.state.currentComment }, 'POST');
        if (res.status == 200) {
            // Layer.showMsg("删除评论成功");
            this.setState({
                comDelModal: false,
                businessCommentList: [],
                page: 0
            })
            this.getSocialCircleList()
            this.getCommentList()
        } else {
            Layer.showMsg("删除评论失败");
        }
    }

    _comDelModal(item) {
        console.log("PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP");

        this.setState({
            comDelModal: true,
            currentComment: item.id
        })
    }


    genIndicator() {
        return <View style={{ alignItems: 'center' }}>
            <ActivityIndicator  //显示一个圆形的 loading 提示符号。
                style={styles.Indicator}
                size={"small"}
                animating={true}
                color={'gray'}
            />
            <Text>正在加载更多</Text>
        </View>
    }

    loadData(pullUp) {
        this.setState({
            page: this.state.page + this.state.pageSize
        })
        this.getCommentList();
        setTimeout(() => {
            var dataArray = []
            // var page = 0
            if (pullUp) {

                dataArray = this.state.businessCommentList,
                    dataArray = [...this.state.businessCommentList, ...this.state.tempAddDatas]
            } else if (this.state.tempAddDatas.length == 0) {
                // this.genIndicator = false,
                //     this.loadData = false
            }
            this.setState({

                businessCommentList: dataArray,
                isLoading: false,
            })

            // console.log(this.state.mySocialCircleList);
            // console.log("###########tempAddDatas");
            // console.log(this.state.tempAddDatas);
            // console.log(this.state.page);
            // this.getSocialCircleList()

        }, 500);
    }

    commentOnFocus(item) {
        if (this.state.commentContent == '') {
            this.commentInput.current.focus();

            this.setState({
                commentPlaceholder: ("回复@ " + item.nickName + " ："),
                viewUserInfoId: item.userInfoId,
                id: item.id,
                tier: 1
            })
        }

    }
    commentOnBlur() {
        if (this.state.commentContent == '') {
            this.setState({
                commentPlaceholder: ("写评论"),
                viewUserInfoId: '',

            })
        }

    }
    commentOnFocusChildren(_item) {
        if (this.state.commentContent == '') {
            this.commentInput.current.focus();
            this.setState({
                commentPlaceholder: ("回复@ " + _item.nickName + " ："),
                viewUserInfoId: _item.userInfoId,
                id: _item.id,
                tier: 2
            })
        }

    }
    _renderItem1(data) {
        console.log(data.item.children);
        return (
            <View style={styles.comment} >
                <View
                    style={styles.comment_left}
                    onPress={() => {
                        this.commentOnFocus(data.item)
                    }}
                    onLongPress={() => {
                        { data.item.count == 1 ? this._comDelModal(data.item) : null }
                    }}
                >
                    <TouchableOpacity
                        style={{ display: "flex", flexDirection: "row", width: '90%' }}
                        onPress={() => {
                            this.commentOnFocus(data.item)
                        }}
                        onLongPress={() => {
                            { data.item.count == 1 ? this._comDelModal(data.item) : null }
                        }}
                    >
                        <TouchableOpacity
                            style={styles.comment_headPortrait_box}
                            onPress={() => {
                                this.props.navigation.push('introduces', {
                                    // params: data.item.flag,
                                    id: data.item.userInfoId,
                                    refresh: () => {
                                        this.getSocialCircleList()
                                    },
                                    // remarksName: data.item.nickName
                                });
                            }}

                        >
                            <Image source={data.item.userCommendAvatar == null ? require("../../assets/images/socialcircle/defaultHeadpor.png") : { uri: data.item.userCommendAvatar }} style={styles.comment_headPortrait}></Image>
                        </TouchableOpacity>
                        <View style={styles.comment_headPortrait_content}>
                            <View>
                                <Text style={styles.comment_headPortrait_name}>{data.item.nickName}</Text>

                            </View>
                            <Text style={styles.comment_content_text}>{data.item.content}</Text>
                            <Text style={styles.comment_time_stamp}>{this.getLocalTime2(data.item.createTime)} {this.getLocalTime(data.item.createTime)}</Text>
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity
                        style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '10%' }}
                        onPress={() => {
                            this.setState({
                                count: 2
                            })
                            this.postSocialCirclePraise(data.item)
                        }}
                    >
                        <Image source={data.item.ifCountSon == 1 ? require("../../assets/images/socialcircle/thumbs-uped.png") : require("../../assets/images/socialcircle/thumbs-up.png")} style={styles.likeBoxImageChild}></Image>
                        <Text style={styles.likeBoxFont}>{data.item.sonCountGive}</Text>
                    </TouchableOpacity>
                </View>
                {data.item.children.map((_item, index) => (
                    <View key={index} style={styles.comment_left_children} >
                        <TouchableOpacity
                            style={{ display: "flex", flexDirection: "row", width: '70%' }}
                            onPress={() => {
                                this.commentOnFocusChildren(_item)
                            }}

                            onLongPress={() => {
                                { _item.count == 1 ? this._comDelModal(_item) : null }
                            }}>
                            <TouchableOpacity
                                style={styles.comment_headPortrait_box_children}
                                onPress={() => {
                                    this.props.navigation.push('introduces', {
                                        // params: item.data.flag,  
                                        id: _item.userInfoId,
                                        refresh: () => {
                                            this.getSocialCircleList()
                                        },
                                        // remarksName: item.data.nickName
                                    });
                                }}>
                                <Image source={_item.userCommendAvatar == null ? require("../../assets/images/socialcircle/defaultHeadpor.png") : { uri: _item.userCommendAvatar }} style={styles.comment_headPortrait_children}></Image>
                            </TouchableOpacity>
                            <View style={styles.comment_headPortrait_content_children}>
                                <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
                                    <Text style={styles.comment_headPortrait_name_children}>{_item.nickName}</Text>
                                    {_item.tier == 2 ?
                                        <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
                                            <Text style={{ color: "rgba(0,0,0,0.4)" }}>{" > "}</Text>
                                            <Text style={styles.comment_headPortrait_name_children}>{_item.byNickName}</Text>
                                        </View> : null}

                                </View>
                                <Text style={styles.comment_content_text_children}>{_item.content}</Text>
                                <Text style={styles.comment_time_stamp_children}>{this.getLocalTime2(_item.createTime)} {this.getLocalTime(_item.createTime)}</Text>
                            </View>
                        </TouchableOpacity>
                        <TouchableOpacity
                            style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '10%' }}
                            onPress={() => {
                                this.setState({
                                    count: 2
                                })
                                this.postSocialCirclePraise(_item)
                            }}
                        >
                            <Image source={_item.ifCountSon == 1 ? require("../../assets/images/socialcircle/thumbs-uped.png") : require("../../assets/images/socialcircle/thumbs-up.png")} style={styles.likeBoxImageChild}></Image>
                            <Text style={styles.likeBoxFont}>{_item.sonCountGive}</Text>
                        </TouchableOpacity>
                    </View>
                ))}
            </View>

        )
    }

    render() {
        const comDelModal = <>
            <Modal
                visible={this.state.comDelModal}
                // style={{ width: "30%", height: '30%' }}
                transparent={true}
                animationType="fade"
                onRequestClose={() => {
                    this.setState({
                        comDelModal: false
                    })
                }}
            >
                <TouchableOpacity
                    style={{
                        width: ScreenWidth,
                        height: ScreenHeight,
                        position: 'absolute',
                        backgroundColor: 'rgba(0,0,0,0.15)',
                        alignItems: 'center',
                        justifyContent: 'center',
                    }}
                    onPress={() => {
                        this.setState({
                            comDelModal: false
                        })
                    }}
                >
                    <TouchableOpacity style={{ padding: 20, backgroundColor: 'white', borderRadius: 6, }} onPress={() => {
                        this.deleteComment()
                    }}>
                        <Text>删除评论</Text>
                    </TouchableOpacity>

                </TouchableOpacity>
            </Modal>
        </>
        const noMoreComment =
            <>

                {/* 底部提示 */}
                <View style={styles.bottom_container}>
                    <Text style={styles.bottom_text}>没有更多了哦~</Text>
                </View>
            </>
        // const images = [
        //     {
        //         filePath: "http://cdn.zyjxsj.com/8228518149440430080.jxapp/cache/react-native-image-crop-picker/1653409968447",
        //         remark: 'xia'
        //     },
        //     {
        //         filePath: "http://cdn.zyjxsj.com/8228518149440430080.jxapp/cache/react-native-image-crop-picker/1653409968447",
        //         remark: 'sdsad'
        //     },
        //     {
        //         filePath: "http://cdn.zyjxsj.com/8228518149440430080.jxapp/cache/react-native-image-crop-picker/1653409968447",
        //         remark: ''
        //     }
        // ]
        {/* 社区详情封装 */ }
        const mySocialCircle =
            <>
                {this.state.socialcircleInfo.map((item, index) => (
                    <View style={styles.mySocialCircle} key={index} >
                        <View style={styles.uploadBoxContainer}>
                            <View style={styles.uploadBoxHeadPortrait}>
                                <TouchableOpacity
                                    style={styles.headPortraitBox}
                                    onPress={() => {
                                        this.props.navigation.navigate('introduces', {
                                            // params: item.data.flag,  
                                            id: item.userInfoId,
                                            refresh: () => {
                                                this.getSocialCircleList()
                                            },
                                            // remarksName: item.data.nickName
                                        });
                                    }}
                                >
                                    <Image source={item.userInfoAvatar == null ? require("../../assets/images/socialcircle/defaultHeadpor.png") : { uri: item.userInfoAvatar }} style={styles.headPortrait}></Image>
                                </TouchableOpacity>
                                <View style={styles.headPortraitText}>
                                    <View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-start' }}>
                                        <Text style={styles.headPortraitName}>
                                            {item.userInfoName}
                                        </Text>
                                        <Image style={{ marginTop: 3, marginLeft: 3, width: 18, height: 18 }} source={item.userType == 1 ? require('../../assets/images/maillist/enterprise.png') : null} />
                                    </View>
                                    <Text style={styles.headPortraitTime}>{item.businessCreateTime}</Text>
                                </View>
                            </View>
                            {/* 社圈标题 */}
                            {item.businessTitle != '' ? <View style={styles.textTitle}>
                                <Text style={styles.textTitleTexts}>
                                    {item.businessTitle}
                                </Text>

                            </View> : null}

                            {/* 标签 */}
                            {item.businessLabel != null && item.businessLabel.length != 0 ? <View style={styles.labelRow}>
                                {item.businessLabel.map((item, index) => (
                                    <View key={index} style={{ backgroundColor: "rgba(223,239,255, 0.19)", paddingLeft: 2, paddingRight: 2, justifyContent: 'center', alignItems: 'center', marginRight: 5, borderColor: 'rgba(24, 144, 255, 1)', borderWidth: 1, borderRadius: 2 }}>
                                        <Text style={styles.textContentLabel} selectable>#{item}</Text>
                                    </View>
                                ))}
                            </View> : null}
                            {/* 社圈内容 */}
                            {item.showInputValueContent != '' ? <View style={styles.textContent}>
                                <Text>
                                    {item.showInputValueContent}
                                </Text>
                            </View> : null}


                            {item.imgDtoList != null && item.imgDtoList.length != 0 ? <View style={styles.row}>
                                {/* 发布的图片 */}
                                {/* {item.imgDtoList != null ? item.imgDtoList.map((item, index) => (
                                    <TouchableOpacity
                                        style={styles.item} key={index}
                                        onPress={() => {
                                            this.props.navigation.push('uploadDetails', { albumDatasHeadPortrait: item, inputText: this.state.describe })
                                        }}
                                    >
                                        <Image style={styles.SystemPrompt} source={{ uri: item.filePath }} />
                                    </TouchableOpacity>

                                )) : <View></View>} */}

                                {
                                    item.imgDtoList.map((item, index) => {

                                        return this._renderImage(item, index);
                                    })
                                }



                            </View> : null}
                            {this.state.isImageShow ?
                                <Modal visible={true} transparent={true}
                                    onRequestClose={() => {
                                        this.setState({
                                            isImageShow: false,
                                        });
                                    }}>

                                    <ImageViewer
                                        imageUrls={item.imgDtoList}
                                        style={{ color: 'black' }}
                                        onCancel={() => {
                                            this.setState({
                                                isImageShow: false,
                                            });
                                        }}
                                        index={this.state.imageIndex}
                                        saveToLocalByLongPress={false}
                                        backgroundColor="white"
                                        renderHeader={() => {

                                        }}
                                        renderFooter={(index) => {
                                            return (
                                                <>
                                                    {this.state.remarks[index] == null ? null :
                                                        <>
                                                            <View style={{ display: 'flex', justifyContent: 'center', padding: 20 }}>
                                                                <Text style={{ color: 'white', fontSize: 20, }}>{this.state.remarks[index]}</Text>
                                                            </View>
                                                        </>}
                                                </>
                                            )
                                        }}
                                        footerContainerStyle={{ width: '100%', backgroundColor: 'gray', opacity: 0.5 }}
                                    >
                                    </ImageViewer>
                                </Modal>
                                : null}
                            {/* <View style={styles.imageDescribeContainer}>
                                <TouchableOpacity key={index}>
                                    <Text>{item.describe}</Text>
                                </TouchableOpacity>
                            </View> */}

                            {/* 定位信息 */}
                            {item.place ? <TouchableOpacity style={styles.locationBox}>
                                <Image source={require("../../assets/images/socialcircle/location2.png")} style={styles.locationBoxImage}></Image>
                                <Text style={styles.locationBoxFont}>{item.place}</Text>
                            </TouchableOpacity> : <View style={{ margin: 3 }}></View>}
                            {/* 阅读数量 */}
                            <View style={styles.timesBox}>
                                <TouchableOpacity style={styles.timesViews}>
                                    <Image source={require("../../assets/images/socialcircle/browse.png")} style={styles.timesViewsImage}></Image>
                                    <Text style={styles.timesViewsFont}>{item.countBrowse} 阅读</Text>
                                </TouchableOpacity>
                                {/* 喜欢数量 */}
                                <View style={styles.likeCommentBox}>
                                    <TouchableOpacity style={styles.likeBox} onPress={() => {
                                        this.setState({
                                            count: 1
                                        })
                                        this.postSocialCirclePraise(item)
                                        // this.setState({
                                        //     flag: item.likeFlag = !item.likeFlag
                                        // }),
                                        //     item.likeFlag ? item.likeBoxFont++ : item.likeBoxFont--
                                    }}>
                                        <Image source={item.ifCount == 1 ? require("../../assets/images/socialcircle/like.png") : require("../../assets/images/socialcircle/like_off.png")} style={styles.likeBoxImage}></Image>
                                        <Text style={styles.likeBoxFont}> {item.countGive}</Text>
                                    </TouchableOpacity>
                                    {/* 评论数量 */}
                                    <TouchableOpacity style={styles.commentBox}>
                                        <Image source={require("../../assets/images/socialcircle/comment.png")} style={styles.commentBoxImage}></Image>
                                        <Text style={styles.commentBoxFont}> {item.countComments}</Text>
                                    </TouchableOpacity>
                                </View>
                            </View>
                        </View>

                        {/* 分割条 */}
                        <View style={styles.divide_bar}></View>

                        {/* 评论区 */}
                        <ScrollView style={{ paddingLeft: 20, paddingRight: 20, flex: 1 }}>
                            <FlatList
                                extraData={this.state}
                                ref={(flatList) => this._flatList = flatList}
                                data={this.state.businessCommentList}
                                renderItem={(data) => this._renderItem1(data)}
                                keyExtractor={(item, index) => item.id + index.toString()}
                                numColumns={1}//一行一列
                                ListFooterComponent={() => this.state.businessCommentList.length != 0 ? (this.state.status == 1 ? this.genIndicator() : noMoreComment) : null}//底部组件
                                onEndReached={//列表被滚动到距离内容最底部不足onEndReachedThreshold设置的的距离时调用。
                                    () => {
                                        this.loadData(true)
                                    }
                                }
                                onEndReachedThreshold={0.5}//0.5 表示距离内容最底部的距离为当前列表可见长度的一半时触发onEndReached回调
                                ListEmptyComponent={() => {
                                    return (
                                        <View style={{ height: 100, alignItems: 'center', justifyContent: 'center' }}>
                                            <Text style={{ fontSize: 16, color: "rgba(196, 196, 196, 1)" }}>没有评论哦，快来评论吧~</Text>
                                        </View>
                                    );
                                }}
                            />
                        </ScrollView>

                    </View>
                ))}
            </>

        {/* 分享弹窗封装 */ }
        const shareModal =
            <>
                <Modal
                    animationType='slide'
                    style={{ height: '30%' }}
                    transparent={true}
                    visible={this.state.isModal}
                    onRequestClose={() => {
                        this.setState({
                            isModal: false
                        })
                    }}

                >
                    <ScrollView style={{ backgroundColor: 'rgba(0, 0, 0, 0.6)', flex: 1, flexDirection: "column-reverse" }} onPress={() => {
                        this.setState({
                            isModal: false
                        })
                    }}>
                        <View style={styles.share}>

                            {/* 分享弹窗头部 */}
                            <View style={styles.share_top}>
                                <Text>        </Text>
                                <Text style={styles.top_text2}>操作</Text>
                                <TouchableOpacity onPress={() => {
                                    this.setState({
                                        isModal: false
                                    })
                                }}>
                                    <Image source={require("../../assets/images/socialcircle/cancel.png")} style={styles.cancel_style} />
                                </TouchableOpacity>
                            </View>

                            {/* 分享弹窗内容 */}
                            <ScrollView>

                                {/* 分享至俊码星球好友 */}
                                {/* <ScrollView horizontal={true} showsHorizontalScrollIndicator={false} style={styles.scrollType}>
                                    {this.state.friendList.map((item, index) => (

                                        <TouchableOpacity style={styles.shareList} key={index}>
                                            <Image source={item.headPortrait} style={styles.shareList_image}></Image>
                                            <Text style={styles.shareList_text}>{item.describe}</Text>
                                        </TouchableOpacity>
                                    ))}
                                </ScrollView> */}

                                {/* 分享至其他App */}
                                {/* <ScrollView horizontal={true} showsHorizontalScrollIndicator={false} style={styles.scrollType}>
                                    {this.state.appList.map((item, index) => (

                                        <TouchableOpacity style={styles.shareList} key={index} >
                                            <Image source={item.headPortrait} style={styles.shareList_image}></Image>
                                            <Text style={styles.shareList_text}>{item.describe}</Text>
                                        </TouchableOpacity>
                                    ))}
                                </ScrollView> */}

                                {/* 其他操作 */}
                                <ScrollView horizontal={true} showsHorizontalScrollIndicator={false} style={styles.scrollType}>
                                    {this.state.otherList.map((item, index) => (

                                        <TouchableOpacity onPress={() => {
                                            this.deleteSocialcircle(),
                                                this.props.navigation.goBack()
                                            this.setState({
                                                isModal: false
                                            })
                                        }} style={styles.shareList} key={index}>
                                            <Image source={item.headPortrait} style={styles.shareList_image}></Image>
                                            <Text style={styles.shareList_text}>{item.describe}</Text>
                                        </TouchableOpacity>
                                    ))}
                                </ScrollView>

                            </ScrollView>
                        </View>
                    </ScrollView>
                </Modal>
            </>
        return (
            <SafeAreaView style={styles.container}>
                <NavBar
                    navigation={this.props.navigation}
                    title={this.state.topTitle}
                    rightImage={this.state.isMy ? this.state.headerRightImage : null}
                    titleColor={"#333"}
                    style={{ backgroundColor: "#fff" }}

                    //点击显示分享弹窗
                    pressRight={() => {
                        this.setState({
                            isModal: true
                        })
                    }}
                />

                <ScrollView style={{ flex: 1 }}>

                    {/* 社区详情 */}
                    {mySocialCircle}

                    {/* 触底显示内容 */}
                    {/* <View style={styles.end_bottom}>
                        <Text style={styles.end_bottom_text}>THE END</Text>
                    </View> */}
                    {comDelModal}
                    {/* 分享弹窗 */}
                    {/* <View style={{ height: "30%" }}> */}

                    {shareModal}
                    {/* </View> */}

                </ScrollView>

                {/* 写评论input框 */}
                <KeyboardAvoidingView
                    behavior="padding"
                >
                    <ScrollView keyboardShouldPersistTaps='handled'>
                        <View style={styles.comment_sent}>
                            <TextInput
                                style={styles.comment_sent_input}
                                placeholder={this.state.commentPlaceholder}
                                multiline={true}
                                // ref={ref => { this.state.commentContent = ref; }}
                                value={this.state.commentContent}
                                ref={this.commentInput}
                                onChangeText={(text) => this.getCommentContent(text)}
                                onBlur={() => this.commentOnBlur()}
                            />
                            <TouchableOpacity style={styles.comment_sent_text}><Text style={{ color: "white" }} onPress={() => {
                                this.postAddComment()
                                // this._flatList.scrollToOffset({ animated: true, viewPosition: 0, index: 0 })
                                // this._flatList.scrollToEnd()
                                // this.state.commentContent.clear()
                                // this.clearInput()
                            }}>发送</Text></TouchableOpacity>
                        </View>
                    </ScrollView>
                </KeyboardAvoidingView>
            </SafeAreaView>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "white"
    },
    mySocialCircle: {
        display: "flex",
        backgroundColor: "white",
        borderRadius: 10,
        marginBottom: 20,
    },
    uploadBoxContainer: {
        padding: 15,
        display: "flex",
    },
    uploadBoxHeadPortrait: {
        display: "flex",
        flexDirection: "row",
        marginBottom: 10
    },
    headPortraitBox: {
        width: 50,
        height: 50,
        borderRadius: 50
    },
    headPortrait: {
        width: 50,
        height: 50,
        borderRadius: 25
        // resizeMode: "contain"
    },
    headPortraitText: {
        height: 50,
        lineHeight: 50,
        marginLeft: 15
    },
    headPortraitName: {
        height: 25,
        lineHeight: 25,
        fontSize: 18,
        fontWeight: 'bold'
    },
    headPortraitTime: {
        height: 25,
        lineHeight: 25,
        color: "rgba(0,0,0,0.4)"
    },
    textTitle: {
        // marginTop: 10,
        marginBottom: 10,
        fontWeight: '700',
        flexDirection: "row",
        alignItems: "center",
        flexWrap: "wrap",
    },
    textTitleTexts: {
        marginRight: 10,
        fontSize: 17,
        // marginBottom: 10
    },
    textContent: {
        // marginTop: 10,
        marginBottom: 10
    },
    textContentLabel: {
        color: "#006DBC",
        fontSize: 13
    },
    locationBox: {
        display: "flex",
        flexDirection: "row",
        marginBottom: 10
    },
    locationBoxImage: {
        width: 20,
        height: 20,
        resizeMode: "contain"
    },
    locationBoxFont: {
        marginLeft: 5,
        color: 'rgba(103, 103, 103, 1)'
    },
    timesBox: {
        display: "flex",
        flexDirection: "row",
        // marginTop: 10,
        justifyContent: "space-between"
    },
    timesViews: {
        display: "flex",
        flexDirection: "row"
    },
    timesViewsImage: {
        width: 20, height: 20,
        resizeMode: "contain"
    },
    timesViewsFont: {
        color: "rgba(0,0,0,0.4)",
        marginLeft: 5
    },
    likeCommentBox: {
        display: "flex",
        flexDirection: "row"
    },
    likeBox: {
        display: "flex",
        flexDirection: "row"
    },
    likeBoxImage: {
        width: 20,
        height: 20,
        resizeMode: "contain"
    },
    likeBoxImageChild: {
        width: 15,
        height: 15,
        resizeMode: "contain"
    },
    likeBoxFont: {
        color: "rgba(0,0,0,0.6)"
    },
    commentBox: {
        display: "flex",
        flexDirection: "row",
        marginLeft: 15
    },
    commentBoxImage: {
        width: 20,
        height: 20,
        resizeMode: "contain"
    },
    commentBoxFont: {
        color: "rgba(0,0,0,0.6)"
    },
    divide_bar: {
        height: 20,
        backgroundColor: "#F7F7F7"
    },
    noComment: {
        height: 100,
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
    },
    comment_box: {
        display: "flex",
        flexDirection: "row",
        marginLeft: 15,
        alignItems: "center",
        justifyContent: "center"
    },
    comment_box_image: {
        width: 20,
        height: 20,
        resizeMode: "contain"
    },
    comment_box_font: {
        color: "rgba(0,0,0,0.6)"
    },
    comment_headPortrait_box: {
        width: '20%',
        height: 40,
    },
    comment_headPortrait_box_children: {
        width: '20%',
        height: 30,
    },
    comment_headPortrait: {
        width: 40,
        height: 40,
        borderRadius: 20
        // resizeMode: "contain"
    },
    comment_headPortrait_children: {
        width: 30,
        height: 30,
        borderRadius: 15
    },
    comment_headPortrait_content: {
        // display: 'flex',
        // flexWrap: 'wrap',
        width: '80%'
        // height: 50,
        // lineHeight: 50,
        // marginLeft: 15,
        // marginRight: 50
    },
    comment_headPortrait_content_children: {
        // display: 'flex',
        // flexWrap: 'wrap',
        width: '80%'
        // height: 50,
        // lineHeight: 50,
        // marginLeft: 15,
        // marginRight: 50
    },
    comment_headPortrait_name: {
        // height: 25,
        // lineHeight: 25,
        fontSize: 16,
        fontWeight: 'bold'
    },
    comment_headPortrait_name_children: {
        // height: 25,
        // lineHeight: 25,
        fontSize: 13,
        fontWeight: 'bold'
    },
    comment_content_text: {
        // flexWrap: 'wrap',
        // width: '80%',
        // height: 25,
        marginTop: 5,
        marginBottom: 5
    },
    comment_content_text_children: {
        // flexWrap: 'wrap',
        // width: '80%',
        // height: 25,
        marginTop: 5,
        marginBottom: 5
        // lineHeight: 25,
    },
    comment_time_stamp: {
        // height: 25,
        // lineHeight: 25,
        color: "rgba(0,0,0,0.4)"
    },
    comment_time_stamp_children: {
        // height: 25,
        // lineHeight: 25,
        color: "rgba(0,0,0,0.4)"
    },
    comment_like_box: {
        display: "flex",
        flexDirection: 'column',
        alignItems: "center"
    },
    comment_like_box_image: {
        width: 20,
        height: 20,
        resizeMode: "contain"
    },
    comment_like_times: {
        color: "rgba(0,0,0,0.4)"
    },
    row: {
        flexDirection: "row",
        justifyContent: 'flex-start',
        width: '100%',
        flexWrap: "wrap",
        marginBottom: 10
    },
    labelRow: {
        flexDirection: "row",
        // justifyContent: "space-between",
        flexWrap: "wrap",
        marginBottom: 10,
        justifyContent: 'flex-start',
    },
    item: {
        marginBottom: '2%',
        width: '32%',
        alignItems: "center",
        height: 120,
    },
    itemMr: {
        flexDirection: "row",
        width: '32%',
        // marginTop: 10,
        marginRight: "2%",
        marginBottom: "2%",
        height: 120,
    },
    imageDescribeText: {
        color: "rgba(0,0,0,0.4)"
    },
    SystemPrompt: {
        width: '100%',
        height: 120,
    },
    comment: {
        backgroundColor: "white",
        display: 'flex',
        flexDirection: 'column',
        // flex: 1,
        // height: 100,
        // display: "flex",
        // flexDirection: "row",
        paddingBottom: 10,
        paddingTop: 20,
        // justifyContent: "space-between",
        borderBottomWidth: 1,
        borderBottomColor: "rgba(0, 0, 0, 0.08)"
    },
    comment_left: {
        display: "flex",
        flexDirection: "row",
        width: '100%'
    },
    comment_left_children: {
        display: "flex",
        flexDirection: "row",
        marginTop: 10,
        // marginBottom: 10,
        width: '100%',
        marginLeft: '20%'
    },
    end_bottom: {
        height: 100,
        display: "flex",
        alignItems: "center",
        backgroundColor: "white"
    },
    end_bottom_text: {

        color: " rgba(0, 0, 0, 0.25)",
        lineHeight: 50

    },
    share: {
        backgroundColor: '#fff',
        flex: 1,
        paddingTop: 0,
        display: 'flex',
        flexDirection: 'column',
        height: "30%",
        position: 'relative',
        bottom: 0,
        borderRadius: 5,
        // marginTop: 300
    },
    share_top: {
        padding: 10,
        flex: 3,
        display: 'flex',
        alignItems: "center",
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
    cancel_style: {
        height: 40,
        width: 40,
        resizeMode: "contain"
    },
    // scrollType:{
    //     paddingLeft:10,
    //     paddingRight:10
    // },
    shareList: {
        marginTop: 20,
        marginLeft: 10,
        marginRight: 10,
        flex: 1,
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center"
    },
    shareList_image: {
        height: 50,
        width: 50,
    },
    shareList_text: {
        marginTop: 5,
        color: "rgba(156, 156, 156, 1)"
    },

    comment_sent: {
        padding: 20,
        display: "flex",
        // flex: 1,
        justifyContent: "center",
        flexDirection: "row",
        alignItems: 'center',
        // height: 60,
        width: "100%",
        position: "relative",
        backgroundColor: "white",
        bottom: 0,
        // backgroundColor: "red",
        borderTopWidth: 1,
        borderTopColor: "rgba(232, 232, 232, 1)"
    },
    comment_sent_input: {
        // height: 40,
        flex: 1,
        backgroundColor: "rgba(234, 234, 234, 1)",
        borderRadius: 40,
        lineHeight: 25,
        paddingLeft: 30,
        marginRight: 20,
        paddingRight: 30,
    },
    comment_sent_text: {
        height: 40,
        width: 60,
        backgroundColor: "rgba(24, 144, 255, 1)",
        borderRadius: 20,
        display: "flex",
        flexDirection: 'row',
        alignItems: "center",
        justifyContent: "center"
    },
    imageDescribeContainer: {
        marginBottom: 20,
        marginTop: 20
    },
    imgFooter: {
        width: 100,
        height: 100,
        backgroundColor: 'white'
    },
    scrollType: {
        marginBottom: 20
    },
    bottom_container: {
        height: 100,
        flex: 1,
        alignItems: "center",
        justifyContent: "center"
    },
    bottom_text: {
        color: "rgba(196, 196, 196, 1)"
    },
})
